<template>
	<view>

		<view>
			<u--text text="爱好类型:" :bold="true"></u--text>
			<view class="tag_list">
				<view class="button_block" v-for="(item,index) in tagList" :key="index">
					#{{item}}
				</view>
			</view>
			<u-divider></u-divider>
		</view>
		
		
	<view>
		<u--text text="参加团体:" :bold="true"></u--text>
		<view class="tag_list">
			 <view class="group_tag" v-for="(item,index) in member_group_tag" :key="index" v-if="item.status == '正常'">
			 	{{item.name}}
			 </view>
		</view>
		<u-divider></u-divider>
	</view>
	
 
			
			
		<view v-if="leader == '是'">
			<u--text text="擅长类型:" :bold="true"></u--text>
			<view class="tag_list">
				<view class="button_block" v-for="(item,index) in leaderTagList" :key="index">
					#{{item}}
				</view>
			</view>
			<u-divider></u-divider>
		</view>

		<view v-if="leader == '是'">
			<u--text text="局长评价:" :bold="true"></u--text>
			<u-cell>
				<view slot="title" style="display: flex;justify-content:space-between;">
					<view style="display: flex;width: 200rpx;">
						<u--text :bold="true" text="好评"></u--text>
						<u--text :text="evaluate.good+'次'"></u--text>
					</view>

					<view style="display: flex;width: 300rpx;">
						<u--text :bold="true" text="好评率"></u--text>
						<u--text type="info" size="16" :text="positiveReviewRate()"></u--text>
					</view>

				</view>
			</u-cell>
			<u-cell>
				<view slot="title" style="display: flex;width: 200rpx;">
					<u--text :bold="true" text="差评"></u--text>
					<u--text :text="evaluate.bad+'次'"></u--text>
				</view>
			</u-cell>
		</view>

		<view class="impression">
			<u--text text="印象标签:" :bold="true"></u--text>
			<view class="impression-list">
				<view class="impression-item" v-for="(item, index) in checkboxs" :key="index">
					<u-tag :text="item.name" :plain="!item.checked" :type="item.color" :name="index"
						@click="checkboxClick">
					</u-tag>
					<u-badge :type="item.color" max="99" :value="item.num" :absolute="true" :offset="[-4,-4]"></u-badge>
				</view>
			</view>

		</view>

		<!-- 		<view style="margin: 30rpx 100rpx;" v-if="show">
			<u-button @click="submit" :customStyle="{color: '#000'}" color="#ffd91d" shape="circle"
				text="留下我的印象"></u-button>
		</view> -->

	</view>

</template>

<script>
	import * as EventApi from '@/api/event.js';
	import * as MemberApi from '@/api/member.js'
	export default {

		props: {
			leader: {
				type: String
			},
			leaderNid: {
				type: Number
			},
			evaluate: {
				type: Object
			},
			tagList: {
				type: Array
			},
			member_group_tag: {
				type: Array
			},
			leaderTagList: {
				type: Array
			}

		},
		data() {
			return {
				show: false,
				checkboxs: []
			}
		},

		created() {
			console.log('组件创建后，但还未挂载')
			// this.randomColor()


		},
		mounted() {
			this.get_tag() 
		},

		methods: {
			submit() {
				console.log(this.checkboxs)
				console.log(this.leaderNid)
				let p = {
					leader_nid: this.leaderNid
				}
				let tag = ''
				this.checkboxs.forEach(e => {
					if (e.checked) {
						tag += e.name + ','
					}

				})
				if (tag == '') {
					uni.showToast({
						title: "请选择印象标签",
						icon: "none",
						duration: 1000
					})
				}
				p.tag = tag.substring(0, tag.length - 1)

				MemberApi.tag_add(p).then(res => {
					if (res.status == 200) {
						this.show = false
					}
				})
			},

			tag_get() {
				MemberApi.tag_get({
					leader_nid: this.leaderNid
				}).then(res => {
					if (res.status == 200) {
						this.show = res.data == 1 ? false : true
					}
				})
			},
			randomColor() {
				let list = ['success', 'primary', 'warning', 'error'];
				for (let i = 0; i < 10; i++) {
					let obj = {
						checked: false,
						color: list[Math.floor(Math.random() * list.length)]
					}
					this.checkboxs.push(obj)
				}

			},
			positiveReviewRate() {
				let resutlt = Math.round(this.evaluate.good / (this.evaluate.good + this.evaluate.bad) * 1000) + '%'
				if(resutlt == "NaN%")
				{resutlt = "0%"}
				
				console.log("resutlt",resutlt)
				return  resutlt
				
			},

			get_tag() {
				MemberApi.tag({
					leader_nid: this.leaderNid
				}).then(res => {
					let taglist = res.data
					let list = ['success', 'primary', 'warning', 'error'];
					taglist.forEach(e => {
						let obj = {
							checked: e.checked,
							color: list[Math.floor(Math.random() * list.length)],
							name: e.tag,
							num: e.num
						}
						this.checkboxs.push(obj)
						// this.checkTagList.push({
						// 	name: e,
						// 	checked: this.model1.userInfo.tag.includes(e)
						// })
						// if (this.model1.userInfo.tag.includes(e)) {
						// 	this.model1.tagList.push(e)
						// }

					})
				})
			},
			
	  
			

			

			checkboxClick(index) {
				let p = {
					leader_nid: this.leaderNid,
					tag: this.checkboxs[index].name
				}
				MemberApi.tag_add(p).then(res => {
					if (res.status == 200) {
						this.checkboxs[index].checked = !this.checkboxs[index].checked
						if (res.data) {
							this.checkboxs[index].num++
						} else {
							this.checkboxs[index].num--
						}
					}
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.impression {
		margin-top: 30rpx;

		.impression-list {
			display: flex;
			flex-wrap: wrap;

			.impression-item {
				margin: 10rpx;
				position: relative;
				display: flex;
			}
		}
	}

	.tag_list {
		margin-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.button_block {
		background-color: #ffd91d;
		box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.2), 0 3rpx 10rpx 0 rgba(0, 0, 0, 0.19);
		padding: 10rpx;
		width: 118rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		margin: 15rpx;
		text-align: center;
	}
	
	
	.group_tag {
		background-color: #ffd91d;
		box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.2), 0 3rpx 10rpx 0 rgba(0, 0, 0, 0.19);
		padding: 10rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		margin: 15rpx;
		text-align: center;
	}
</style>